<template>
  <div class="article-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="text item">
        <el-form ref="form" size="small" :model="form" label-width="40px">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio :label="null">全部</el-radio>
              <el-radio v-for="(item, index) in articleStatus" :key="index" :label="item.status">{{ item.text }}</el-radio>
              <!--<el-radio label="待审核"></el-radio>
              <el-radio label="审核通过"></el-radio>
              <el-radio label="审核失败"></el-radio>
              <el-radio label="已删除"></el-radio>-->
            </el-radio-group>
          </el-form-item>
          <el-form-item label="频道">
            <el-select v-model="channel_id" placeholder="请选择">
              <el-option label="全部" :value="null"></el-option>
              <el-option v-for="item in form.channels" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <div class="block">
              <el-date-picker
                v-model="form.date"
                type="datetimerange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                range-separator="至"
                @change="loadArticles"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" :disabled="loading">筛选</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>根据筛选条件共查询到 {{ total_count }} 条结果：</span>
      </div>
      <div class="text item">
        <el-table
          :data="articles"
          stripe
          v-loading="loading"
          style="width: 100%">
          <el-table-column
            prop="cover"
            label="封面">
            <template slot-scope="scope">
              <el-image
                style="width: 100%; height: 107px"
                :src="scope.row.cover.images[0]"
                lazy
                fit="scale-down"
              >
               <div slot="placeholder"  class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
              <!-- <img
             v-if="scope.row.cover.images[0]"
             class="article-cover"
             :src="scope.row.cover.images[0]" alt=""
           >
           <img v-else class="article-cover" src="./no-cover.gif" alt=""> -->
              <!--
                下面这种情况是在运行期间动态改变处理的。
                而本地图片必须在打包的时候就存在。
               -->
              <!-- <img
                class="article-cover"
                :src="scope.row.cover.images[0] || './no-cover.gif'" alt=""
              > -->
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题">
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <el-tag :type="articleStatus[scope.row.status].type">{{ articleStatus[scope.row.status].text }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="pubdate"
            label="发布时间">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button type="primary" plain circle  @click="edit(scope.row.id)"  icon="el-icon-edit"></el-button>
              <el-button  type="danger" plain circle @click="del(scope.row.id)" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination class="pagination"
        background
        layout="prev, pager, next"
        :total="total_count"
        :current-page.sync="current_page"
        @current-change="oncurrentChange"
        :pageSize="page_size" :disabled="loading"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getArticles, getChannel, deleteArticles } from '@/api/article'
export default {
  name: 'ArticleIndex',
  data () {
    return {
      form: {
        date: [],
        channels: [],
        status: null
      },
      articles: [],
      articleStatus: [
        { status: 0, text: '草稿', type: 'info' }, // 0
        { status: 1, text: '待审核', type: '' }, // 1
        { status: 2, text: '审核通过', type: 'success' }, // 2
        { status: 3, text: '审核失败', type: 'warning' }, // 3
        { status: 4, text: '已删除', type: 'danger' } // 4
      ],
      total_count: 0,
      page_size: 10,
      channel_id: null,
      loading: true,
      current_page: 1
    }
  },
  methods: {
    onSubmit () {
      this.loadArticles()
    },
    loadArticles (page = 1) {
      this.loading = true
      getArticles({
        page: page,
        per_page: this.page_size,
        channel_id: this.channel_id,
        status: this.form.status,
        begin_pubdate: this.form.date ? this.form.date[0] : null,
        end_pubdate: this.form.date ? this.form.date[1] : null
      }).then(res => {
        this.total_count = res.data.data.total_count
        this.articles = res.data.data.results
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    edit (id) {
      this.$router.push('/publish?id=' + id)
    },
    del (id) {
      this.$confirm('确认退出吗？', '退出提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteArticles(id.toString()).then(res => {
          if (res.status === 204) {
            this.$message.success('删除文章成功！')
            this.loadArticles(this.current_page)
          } else {
            this.$message.error('删除文章失败！')
          }
        })
      }).catch(() => {})
    },
    oncurrentChange (page) {
      this.loadArticles(page)
    },
    loadChannel () {
      getChannel().then(res => {
        this.form.channels = res.data.data.channels
      })
    }
  },
  components: {},
  props: {},
  computed: {},
  watch: {},
  created () {
    this.loadArticles()
    this.loadChannel()
  },
  mounted () {
  }
}
</script>

<style scoped>
.box-card{
  margin-bottom: 30px;
}
.pagination{
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.image-slot{
  width: 100%;
  text-align: center;
}
.article-cover {
  width: 60px;
  background-size: cover;
}
</style>
